<template>
	<view class="mian">
		<!-- #ifdef MP-WEIXIN -->
			<navbar :bgColor="bgColor" :btnColors='btnColor' title="快递信息" :isGoBack="true" :isNotice="true" :visible="true"></navbar>
		<!-- #endif -->	
		
		<view class="goods_info">
			<view class="">
				<image :src="goods_info.goods_image" mode="aspectFill" class="goods_image"></image>
			</view> 
			<view class="flex flex-direction justify-between ml-20">
				<view class="flex">
					<text style="font-weight: 600;color: #999; font-size: 28rpx;">物流状态</text>
					<text class="ml-15" style="font-weight: 600;color: #000; font-size: 28rpx;">{{goods_info.order_exp?'发货中':'暂无物流'}}</text>
				</view>
				<text style="font-weight: 400;color: #999; font-size: 28rpx;">快递公司：{{goods_info.express_title}}</text>
				<view class="flex align-center text-center">
					<text style="font-weight: 400;color: #999; font-size: 28rpx;">快递单号：</text>
					<text  style="font-weight: 400;color: #000; font-size: 28rpx;" class="mr-10">{{goods_info.express_code}}</text>
					<text style="color: #518FA0 ;" @click="copy(goods_info.express_code)">复制 </text>					
				</view>				
			</view>
		</view>
		
		
		<view class="kq">
			<view class="">
				<text>物流信息</text>
			</view>
			<view class="mt-30">
				<u-empty mode="data" v-if="!goods_info.order_exp"></u-empty>
				<u-steps current="0" direction="column"  dot v-if="goods_info.order_exp">
					<u-steps-item :title="item.text" :desc="item.ftime" class="mt-30" v-for="(item,index) in goods_info.order_exp"></u-steps-item>
				</u-steps>
			</view>
			
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
		   	return {
				...getApp().globalData.config,
				orderId:'',
				goods_info:''
			}
		},
		onLoad(option){
			this.orderId=option.id
		},
		onShow() {
			this.goodsInfo()
		},
		methods:{
			//获取商品信息
			goodsInfo(){
				let that=this 
				let obj_data={
				   token:uni.getStorageSync('userInfo').token,
				   orderId:this.orderId
				}  
				
			    this.$http.orderGoodslog(obj_data).then(res =>{
				 if(res.resCode=="9999"){
				    that.goods_info=res.data.lists
				 }else{
				   uni.showToast({title:res.resMessage,icon:"none"})
				 }
			 })
			},	
			
			//复制
			copy(text){
				uni.setClipboardData({
					   data:text,//要被复制的内容
					   success:()=>{
						 uni.showToast({
						   title:"复制成功"
						 })
					   }
					});

			}
		}
	}
</script>

<style>
	.goods_info{
		display: flex;
		background-color: #FFFFFF;
		padding-left: 30rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		font-size: 28rpx;
	}
	.goods_image{
		width: 154rpx;
		height: 144rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
    .u-text{
		width: 86% !important;
	}
	.kq{
		display: flex;
		margin-top: 20rpx;
		flex-direction: column;
		padding-top: 20rpx;
		padding-left: 40rpx;
		padding-right:20rpx;
		background-color: #fff;
	}
	.u-text__value{
		color:#518FA0 !important;
		font-size: 25rpx;
		margin-top: 15rpx;
	}
	.u-text__value--tips{
		margin-left: 5rpx;
		margin-top: 10rpx;
		color:#518FA0 !important;
	}
</style>